@use "@angular/material" as mat;

@include mat.elevation-classes();
@include mat.app-background();

$primary-palette: mat.m2-define-palette(mat.$m2-blue-grey-palette, 500);
$accent-palette: mat.m2-define-palette(
  mat.$m2-orange-palette,
  A400,
  A100,
  A700
);
$warn-palette: mat.m2-define-palette(mat.$m2-red-palette);

$accent-color: #ff9100;
$body-background-color: #303030;
$border-color: #868e96;
$hover-background-color: #607d8b;
$primary-text: #fff;
$second-background-color: #424242;

$dark-theme: mat.m2-define-dark-theme(
  (
    color: (
      primary: $primary-palette,
      accent: $accent-palette,
      warn: $warn-palette,
    ),
  )
);

@include mat.all-component-themes($dark-theme);

:root {
  --accent-color: #{$accent-color};
  --body-background-color: #{$body-background-color};
  --border-color: #{$border-color};
  --hover-background-color: #{$hover-background-color};
  --primary-text: #{$primary-text};
  --second-background-color: #{$second-background-color};
}
